import './App.css';
import { BrowserRouter, Route, Link, Routes } from 'react-router-dom'
import React, { useEffect, useState } from 'react';

function App() {
  const [globalState, setGlobalState] = useState({});

  useEffect(() => {
    if (React.$globalStateChange) {
      React.$globalStateChange((cur) => {
        console.log('%c --------react 子应用最新数据----------------', 'font-size: 18px; color: #FF0000', cur);
        setGlobalState(cur)
      }, true)
    }
  }, [])


  const handleGlobalState = () => {
    React.$setGlobalState({
      ...globalState,
      msgBase: 'react 中更改全局数据',
      msgReact: 'react中新增了数据'
    })
  }

  return (
    <BrowserRouter className="App" basename={window.__POWERED_BY_QIANKUN__ ? '/react' : '/'}>
     <Link to={'/'}>首页</Link>
     <Link to={'/about'}>关于</Link>
     <Routes>
        <Route path='/' element={<div>
          home page
          <button onClick={handleGlobalState}>react 更新global state</button>
        </div>} />
        <Route path='/about' element={<div>about page</div>} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;
